<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button
      @click="
        () => {
          this.$router.push('/Home');
        }
      "
    >
      首页
    </button>
    <img
      ref="captcha"
      src="http://localhost:3000/api/captcha"
      alt=""
      @click.prevent="getCaptcha()"
    />

    <input type="text" v-model="username" />
    <input type="text" v-model="password" />
    <input type="text" v-model="captcha" />
    <button class="submit-btn" @click.prevent="login()">登录</button>
  </div>
</template>

<script>
import { pwdlogin, getcaptcha } from "../api/index";
// import axios from "axios";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "这是小桂的商城项目",
      username: "", //账号
      password: "", //密码
      captcha: "", // 图形验证码
    };
  },
  mounted() {},
  methods: {
    // 获取图形验证码
    getCaptcha() {
      this.$refs.captcha.src =
        "http://localhost:3000/api/captcha?time=" + new Date();
    },
    // 账户密码登录
    async login() {
      this.result = await pwdlogin(this.username, this.password, this.captcha);
      console.log(this.result);
      if (this.result.status === 200) {
        // Toast("登陆成功");
        this.$router.push("/Home");
      } else {
        this.getCaptcha();
        return;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
